<template>
  <div class="avatar-container" @click="editImage()">
    <el-dialog :title="title" :model-value="dialogVisibleCorpper" align-center:true width="400px" top="40vh"
      append-to-body @opened="openDialog" :before-close="beforeClose">
      <el-row justify="center">
        <el-col :span="24" style="text-align: center">
          <div class="preview-box">
            <img v-if="previews" :src="previews" />
            <span v-else></span>
          </div>
        </el-col>
      </el-row>
      <el-row style="margin-top: 12px">
        <el-col :span="12" style="text-align: left">
          <el-upload 
            :on-change="avatarChange" 
            :before-upload="beforeUpload" 
            :show-file-list="false"
            :file-list="filelist"
            limit=1
            >
            <el-button>选择图片</el-button>
          </el-upload>
        </el-col>
        <el-col :span="12" style="text-align: right">
          <el-button type="primary" @click="determine()">提交</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script setup>

import { ElMessage } from 'element-plus'
import 'vue-cropper/dist/index.css'
import { VueCropper } from 'vue-cropper'
import { getCurrentInstance, ref, reactive, watch } from 'vue'
import { user_UPLOAD_avatar } from '@/apis/user_UPLOAD_avatar.js';

const { proxy } = getCurrentInstance();
const avatar = ref();

//接收父组件的传参，props中的参数为只读属性，如果要在子组件中修改props，需要通过emit在子组件提交数据，由父组件监听帮助子组件修改
const props = defineProps({
  dialogVisibleCorpper: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '上传图片'
  }
})

const previews = ref();

// 上传图片处理
const beforeUpload = (rawFile) => {
  if (rawFile.type.indexOf('image/') === -1) {
    ElMessage.error('请上传图片类型文件!');
    return false;
  }
  if (rawFile.size / 1024 / 1024 > 5) {
    ElMessage.error('文件大小不能超过5MB!');
    return false;
  }

  const reader = new FileReader();
  reader.readAsDataURL(rawFile);
  avatar.value=rawFile
  reader.onload = () => {
    previews.value = reader.result;
  };

  reader.onerror = (error) => {
    ElMessage.error('读取图片失败');
    console.error('FileReader error:', error);
  };

  return false;  // 需要返回 false 来阻止默认的上传行为
};


const avatarChange = (file, fileList) => {

};


const emit = defineEmits(['update:dialogVisibleCorpper', 'confirm'])

// 关闭弹窗
const beforeClose = () => {
  previews.value = null;
  emit('update:dialogVisibleCorpper', false)
}
// 提交图片
const determine = async () => {
  emit('confirm', previews.value);
  previews.value = null;
  const file = avatar.value;
  const blob = new Blob([file], { type: file.type}); 
   console.log('88888888888',blob);
  // 创建 FormData 对象
  const formData = new FormData();
  // 将文件添加到 FormData 中，命名为 "head"
  formData.append('head', blob,file.name);
  await user_UPLOAD_avatar(formData, proxy);
}
</script>


<style scoped>
.preview-box {
  display: inline-block;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1px solid #ccc;
  overflow: hidden;
}

.preview-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>